<template>
  <div class="seat-allocation-container">
    <ContentWrap class="seat-wrapper">
      <!-- 坐席配置头部 -->
      <div class="seat-header">
        <div class="header-left">
          <div class="header-icon">
            <Icon icon="ep:headset" />
          </div>
          <div class="header-content">
            <h4 class="seat-title">坐席配置</h4>
            <p class="seat-subtitle">管理租户的坐席分配和配置</p>
          </div>
        </div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-buttons-container">
        <div class="button-group">
          <el-button type="primary" @click="batchCall('corp-simple-call')" class="action-button">
            <Icon icon="ep:phone" class="btn-icon" />
            企业点呼话费
          </el-button>
          <el-button type="primary" @click="batchCall('batch-call')" class="action-button">
            <Icon icon="ep:phone-filled" class="btn-icon" />
            群呼话费
          </el-button>
          <el-button type="primary" @click="robotCall" class="action-button">
            <Icon icon="ep:grid" class="btn-icon" />
            数字员工数量
          </el-button>
          <el-button
            type="primary"
            @click="callFee('simple-call')"
            :disabled="isChange"
            class="action-button"
          >
            <Icon icon="ep:headset" class="btn-icon" />
            坐席点呼话费
          </el-button>
          <el-button
            type="primary"
            @click="callFee('double-call')"
            :disabled="isChange"
            class="action-button"
          >
            <Icon icon="ep:connection" class="btn-icon" />
            双向回拨话费
          </el-button>
          <el-button
            @click="batchOperation('sipCallAuditStatus')"
            :disabled="isChange"
            class="action-button"
          >
            <Icon icon="ep:check" class="btn-icon" />
            加白
          </el-button>
          <el-button
            @click="batchOperation('sipCallNumber')"
            :disabled="isChange"
            class="action-button"
          >
            <Icon icon="ep:edit" class="btn-icon" />
            修改主叫
          </el-button>
          <el-button @click="batchOperation('expireAt')" :disabled="isChange" class="action-button">
            <Icon icon="ep:calendar" class="btn-icon" />
            修改有效期
          </el-button>
          <el-button
            type="success"
            v-hasPermi="['system:tenant:create']"
            @click="createSeat('create')"
            class="action-button create-btn"
          >
            <Icon icon="ep:plus" class="btn-icon" />
            创建坐席
          </el-button>
        </div>
      </div>

      <!-- 表格容器 -->
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          border
          class="enhanced-table"
          :header-cell-style="{ background: '#f8f9ff', color: '#303133', fontWeight: '600' }"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column label="坐席工号" align="center" prop="agentNumber" width="120">
            <template #default="scope">
              <div class="agent-number-cell">
                <Icon icon="ep:user" class="cell-icon" />
                <span class="cell-text">{{ scope.row.agentNumber }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="双呼主叫手机号" align="center" prop="telephone" width="150">
            <template #default="scope">
              <div class="phone-cell">
                <Icon icon="ep:phone" class="cell-icon" />
                <span class="cell-text">{{ scope.row.telephone }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="SIP主叫号码" align="center" prop="sipCallNumber" width="150">
            <template #default="scope">
              <div class="sip-cell">
                <Icon icon="ep:connection" class="cell-icon" />
                <span class="cell-text">{{ scope.row.sipCallNumber }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="真实姓名" align="center" prop="realName" width="220">
            <template #default="scope">
              <div class="name-cell">
                <div v-if="scope.row.realName != null" class="name-display">
                  <Icon icon="ep:avatar" class="cell-icon" />
                  <span class="cell-text">{{ scope.row.realName }}</span>
                </div>
                <div v-if="scope.row.realName == null" class="name-input-container">
                  <el-input
                    maxlength="10"
                    clearable
                    v-if="scope.row.isShowRealNameInput == true"
                    v-model.trim="scope.row.realNameValue"
                    class="name-input"
                    placeholder="请输入真实姓名"
                  />
                  <div class="input-actions">
                    <el-icon
                      v-if="!scope.row.isShowRealNameInput"
                      @click="scope.row.isShowRealNameInput = !scope.row.isShowRealNameInput"
                      class="action-icon add-icon"
                    >
                      <Plus />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowRealNameInput"
                      @click="handleSaveName(scope.row.realNameValue, scope.row, 'name')"
                      class="action-icon save-icon"
                    >
                      <Select />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowRealNameInput"
                      @click="scope.row.isShowRealNameInput = !scope.row.isShowRealNameInput"
                      class="action-icon cancel-icon"
                    >
                      <CloseBold />
                    </el-icon>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="身份证号" align="center" prop="idNumber" width="280">
            <template #default="scope">
              <div class="id-cell">
                <div v-if="scope.row.idNumber != null" class="id-display">
                  <Icon icon="ep:credit-card" class="cell-icon" />
                  <span class="cell-text">{{ scope.row.idNumber }}</span>
                </div>
                <div v-if="scope.row.idNumber == null" class="id-input-container">
                  <el-input
                    maxlength="18"
                    clearable
                    v-if="scope.row.isShowIdNumberInput == true"
                    v-model.trim="scope.row.idNumberValue"
                    class="id-input"
                    placeholder="请输入身份证号"
                  />
                  <div class="input-actions">
                    <el-icon
                      v-if="!scope.row.isShowIdNumberInput"
                      @click="scope.row.isShowIdNumberInput = !scope.row.isShowIdNumberInput"
                      class="action-icon add-icon"
                    >
                      <Plus />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowIdNumberInput"
                      @click="handleSaveName(scope.row.idNumberValue, scope.row, 'idNumber')"
                      class="action-icon save-icon"
                    >
                      <Select />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowIdNumberInput"
                      @click="scope.row.isShowIdNumberInput = !scope.row.isShowIdNumberInput"
                      class="action-icon cancel-icon"
                    >
                      <CloseBold />
                    </el-icon>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="点呼主叫加白"
            align="center"
            prop="sipCallAuditStatus"
            width="140"
          >
            <template #default="scope">
              <div class="status-cell">
                <el-tag
                  v-if="auditStatusMap[scope.row.sipCallAuditStatus]"
                  :type="auditStatusMap[scope.row.sipCallAuditStatus].type"
                  class="enhanced-tag"
                >
                  {{ auditStatusMap[scope.row.sipCallAuditStatus].text }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="双向回拨加白"
            align="center"
            prop="doubleCallAuditStatus"
            width="140"
          >
            <template #default="scope">
              <div class="status-cell">
                <el-tag
                  v-if="auditStatusMap[scope.row.doubleCallAuditStatus]"
                  :type="auditStatusMap[scope.row.doubleCallAuditStatus].type"
                  class="enhanced-tag"
                >
                  {{ auditStatusMap[scope.row.doubleCallAuditStatus].text }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="负责人" align="center" prop="ownerUsername" width="120">
            <template #default="scope">
              <div class="owner-cell">
                <Icon icon="ep:user-filled" class="cell-icon" />
                <span class="cell-text">{{ scope.row.ownerUsername || '-' }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" prop="status" width="120">
            <template #default="scope">
              <div class="status-cell">
                <el-tag type="info" v-if="scope.row.status == 0" class="enhanced-tag"
                  >未启用</el-tag
                >
                <el-tag type="success" v-if="scope.row.status == 1" class="enhanced-tag"
                  >已启用</el-tag
                >
                <el-tag type="danger" v-if="scope.row.status == 9" class="enhanced-tag"
                  >已过期</el-tag
                >
              </div>
            </template>
          </el-table-column>

          <el-table-column label="有效期" align="center" prop="expireAt" width="180">
            <template #default="scope">
              <div class="expire-cell">
                <Icon icon="ep:calendar" class="cell-icon" />
                <span class="cell-text">
                  <span v-if="scope.row.expireAt == 0">永久</span>
                  <span v-else>至：{{ formatDate(scope.row.expireAt) }}</span>
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="200"
          >
            <template #default="scope">
              <div class="time-cell">
                <Icon icon="ep:clock" class="cell-icon" />
                <span class="cell-text">{{
                  dateFormatter(scope.row, null, scope.row.createTime)
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="340" fixed="right">
            <template #default="scope">
              <div class="table-actions">
                <el-button
                  type="primary"
                  link
                  @click="showPackage(scope.row)"
                  class="table-action-btn"
                  size="small"
                >
                  <Icon icon="ep:wallet" class="btn-icon" />
                  套餐余额
                </el-button>
                <el-button
                  link
                  type="success"
                  :disabled="scope.row.expireTime == 0"
                  @click="onRenew('call-agent', scope.row.id)"
                  v-hasPermi="['system:tenant:update']"
                  class="table-action-btn !ml-0"
                  size="small"
                >
                  <Icon icon="ep:refresh" class="btn-icon" />
                  续费
                </el-button>
                <el-button
                  link
                  type="primary"
                  @click="openForm('update', scope.row.id)"
                  v-hasPermi="['system:tenant:update']"
                  class="table-action-btn !ml-0"
                  size="small"
                >
                  <Icon icon="ep:edit" class="btn-icon" />
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  link
                  @click="handleDelete(scope.row.id)"
                  v-hasPermi="['system:tenant:delete']"
                  class="table-action-btn !ml-0"
                  size="small"
                >
                  <Icon icon="ep:delete" class="btn-icon" />
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </ContentWrap>

    <!-- 表单弹窗：添加 -->
    <Seat ref="formRef" @success="getList" />
    <!-- 表单弹窗：修改 -->
    <UpdateSeat ref="formUpdateRef" @success="getList" />
    <!-- 批量操作 -->
    <UpdateSeatBatch ref="formBatchRef" @success="getList" />
    <!-- 续费弹窗 -->
    <RenewPackageDialog ref="renewPackgeRef" />
    <!-- 选购套餐 -->
    <SkuFormDialog ref="skuFormDialogRef" />
    <!-- 套餐余额 -->
    <PackagePalance ref="tablePackage" />
    <!-- 群呼话费 -->
    <BatchCallForm ref="batchRef" />
    <!-- 机器人花费 -->
    <RobotCallForm ref="robotRef" />
  </div>
</template>

<script setup>
import * as AgentApi from '@/api/call/agent'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import Seat from './seat.vue'
import UpdateSeat from './AgentForm.vue'
import { Plus, Select, CloseBold } from '@element-plus/icons-vue'
import UpdateSeatBatch from './AgentFormBatch.vue'
import RenewPackageDialog from '@/components/RenewPackageDialog/index.vue'
import SkuFormDialog from './SkuFormDialog.vue'
import PackagePalance from '@/components/PackagePalance/index.vue'
import BatchCallForm from './batchCall.vue'
import RobotCallForm from './robotCall.vue'

const message = useMessage()
const { t } = useI18n()

const loading = ref(true)
const tablePackage = ref(null)
const list = ref([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  agentNumber: undefined,
  telephone: undefined,
  realName: undefined,
  createTime: [],
  ownerUserId: '',
  tenantId: null
})
const auditStatusMap = {
  0: { type: 'info', text: '待审批' },
  1: { type: 'success', text: '已加白' },
  2: { type: 'danger', text: '不通过' }
}
const isChange = computed(() => {
  return multipleSelection.value.length == 0
})
// 选择坐席
const multipleSelection = ref([])
const ownerUserIdSelection = ref([])
const handleSelectionChange = (val) => {
  ownerUserIdSelection.value = val
  multipleSelection.value = val.map((item) => item.id)
}
const formBatchRef = ref(null)
/*批量操作*/
const batchOperation = (type) => {
  formBatchRef.value.open(type, multipleSelection.value, queryParams.tenantId)
}
const skuFormDialogRef = ref(null)
/*套餐话费*/
const callFee = (type) => {
  skuFormDialogRef.value.open(type, queryParams.tenantId, ownerUserIdSelection.value)
}
const batchRef = ref(null)
/*群呼话费*/
const batchCall = (product) => {
  batchRef.value.open('create', queryParams.tenantId, product)
}

const robotRef = ref(null)
/*群呼话费*/
const robotCall = () => {
  robotRef.value.open('create', queryParams.tenantId)
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await AgentApi.getAgentPageAdmin(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/**删除*/
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await AgentApi.deleteAgentAdmin({
      id,
      tenantId: queryParams.tenantId
    })
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
const handleSaveName = async (val, row, field) => {
  if (field == 'name') {
    if (val) {
      row.realName = val
    } else {
      message.error('请输入真实姓名')
      return
    }
  }
  if (field == 'idNumber') {
    let idReg =
      /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
    if (idReg.test(val) != true) {
      message.error('请输入有效的身份证号码！')
      return
    } else {
      row.idNumber = val
    }
  }
  await AgentApi.updateAgentAdmin({ ...row, tenantId: queryParams.tenantId })
  message.success(t('common.updateSuccess'))
  row.isShowRealNameInput = false
}
/*编辑坐席*/
const formUpdateRef = ref(null)
const openForm = (type, id) => {
  formUpdateRef.value.open(type, id, queryParams.tenantId)
}
/** 添加坐席 */
const formRef = ref(null)
const createSeat = (type) => {
  formRef.value.open(type, queryParams.tenantId)
}
/*续费方法*/
const renewPackgeRef = ref(null)
const onRenew = (code, rowId) => {
  renewPackgeRef.value.open(code, rowId)
}
/*套餐余额*/
const showPackage = (item) => {
  tablePackage.value.open(item.ownerUserId, queryParams.tenantId, true)
}
const props = defineProps({
  configureId: String
})
watch(
  () => props.configureId,
  (value) => {
    if (value) {
      queryParams.tenantId = value
      getList()
    }
  },
  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.seat-allocation-container {
  padding: 0;
}

.seat-wrapper {
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;

  :deep(.el-card__body) {
    padding: 0;
  }
}

/* 坐席配置头部 */
.seat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    gap: 16px;
  }
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    justify-content: center;
    text-align: center;
  }
}

.header-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

.header-content {
  margin-left: 12px;

  @media (max-width: 768px) {
    margin-left: 10px;
  }
}

.seat-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.seat-subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 操作按钮区域 */
.action-buttons-container {
  padding: 20px 24px;
  background: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.button-group {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;

  &:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
}

.action-button {
  border-radius: $border-radius-small;
  padding: 10px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  @media (max-width: 768px) {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }

  .btn-icon {
    font-size: 14px;
  }

  &.create-btn {
    background: linear-gradient(135deg, $success-color 0%, #52c41a 100%);
    border-color: $success-color;

    &:hover {
      box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
    }
  }
}

/* 表格容器 */
.table-container {
  background: white;
  overflow-x: auto;
}

.enhanced-table {
  :deep(.el-table__header) {
    th {
      background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
      color: $text-primary !important;
      font-weight: 600 !important;
      border-bottom: 2px solid $primary-light;
      padding: 16px 12px;
    }
  }

  :deep(.el-table__body) {
    tr {
      transition: all 0.3s ease;

      &:hover {
        background: $primary-light !important;
      }

      td {
        padding: 14px 12px;
        border-bottom: 1px solid $border-light;
      }
    }

    .el-table__row--striped {
      background: #fafbff;

      &:hover {
        background: $primary-light !important;
      }
    }
  }

  // H5适配
  @media (max-width: 768px) {
    :deep(.el-table__header) th {
      padding: 12px 8px;
      font-size: 13px;
    }

    :deep(.el-table__body) td {
      padding: 12px 8px;
      font-size: 12px;
    }
  }
}

/* 表格单元格样式 */
.agent-number-cell,
.phone-cell,
.sip-cell,
.owner-cell,
.expire-cell,
.time-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.cell-icon {
  font-size: 14px;
  flex-shrink: 0;

  &.ep-user {
    color: $primary-color;
  }

  &.ep-phone {
    color: $success-color;
  }

  &.ep-connection {
    color: $warning-color;
  }

  &.ep-user-filled {
    color: $info-color;
  }

  &.ep-calendar {
    color: $text-secondary;
  }

  &.ep-clock {
    color: $text-secondary;
  }

  &.ep-avatar {
    color: $primary-color;
  }

  &.ep-credit-card {
    color: $warning-color;
  }
}

.cell-text {
  color: $text-regular;
  font-weight: 500;
}

/* 姓名和身份证输入区域 */
.name-cell,
.id-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.name-display,
.id-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-input-container,
.id-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.name-input,
.id-input {
  width: 100%;
  max-width: 180px;

  :deep(.el-input__wrapper) {
    border-radius: $border-radius-small;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
      border-color: $primary-color;
    }
  }
}

.input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-icon {
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px;
  border-radius: 4px;

  &:hover {
    transform: scale(1.1);
  }

  &.add-icon {
    color: $success-color;

    &:hover {
      background: rgba(103, 194, 58, 0.1);
    }
  }

  &.save-icon {
    color: $primary-color;

    &:hover {
      background: $primary-light;
    }
  }

  &.cancel-icon {
    color: $danger-color;

    &:hover {
      background: rgba(245, 108, 108, 0.1);
    }
  }
}

/* 状态单元格 */
.status-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.enhanced-tag {
  border-radius: 6px;
  font-weight: 500;
  padding: 4px 8px;
  font-size: 12px;

  @media (max-width: 768px) {
    font-size: 11px;
    padding: 3px 6px;
  }
}

/* 表格操作按钮 */
.table-actions {
  display: flex;
  gap: 8px;
  justify-content: center;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 4px;
  }
}

.table-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;

  &:hover {
    transform: scale(1.05);
  }

  .btn-icon {
    font-size: 12px;
  }

  @media (max-width: 768px) {
    padding: 4px 8px;
    font-size: 11px;
    justify-content: center;
  }

  &[type='primary']:hover {
    background: $primary-light;
    color: $primary-color;
  }

  &[type='success']:hover {
    background: rgba(103, 194, 58, 0.1);
    color: $success-color;
  }

  &[type='danger']:hover {
    background: rgba(245, 108, 108, 0.1);
    color: $danger-color;
  }
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 24px;
  background: white;
  border-top: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
  }

  :deep(.el-pagination) {
    .el-pager li {
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;

      &:hover {
        background: $primary-light;
        color: $primary-color;
      }

      &.is-active {
        background: $primary-color;
        color: white;
      }
    }

    .btn-prev,
    .btn-next {
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: $primary-light;
        color: $primary-color;
      }
    }

    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 加载状态优化 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .path {
      stroke: $primary-color;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .seat-wrapper {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .action-buttons-container,
  .table-container,
  .pagination-wrapper {
    background: #374151;
  }

  .seat-title {
    color: #f9fafb;
  }

  .cell-text {
    color: #f9fafb;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      th {
        background: #4b5563 !important;
        color: #f9fafb !important;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }

  .name-input,
  .id-input {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .action-icon {
    &.add-icon:hover {
      background: rgba(34, 197, 94, 0.1);
    }

    &.save-icon:hover {
      background: rgba(96, 165, 250, 0.1);
    }

    &.cancel-icon:hover {
      background: rgba(239, 68, 68, 0.1);
    }
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .seat-header {
    padding: 12px 16px;
  }

  .action-buttons-container {
    padding: 12px 16px;
  }

  .button-group {
    gap: 6px;
    margin-bottom: 6px;
  }

  .action-button {
    padding: 10px 12px;
    font-size: 12px;
  }

  .enhanced-table {
    :deep(.el-table__header) th {
      padding: 10px 6px;
      font-size: 12px;
    }

    :deep(.el-table__body) td {
      padding: 10px 6px;
      font-size: 11px;
    }
  }

  .pagination-wrapper {
    padding: 12px;
  }

  .name-input,
  .id-input {
    max-width: 140px;
  }

  .cell-text {
    font-size: 11px;
  }
}
</style>
